<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.global.js"></script>
</head>
<style>
    .btn {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        padding: 3px;
    }
</style>
<body>
<!--
    v-html="html代码"
    {{普通文本}}            v-text:"普通文本"
    :属性名="属性值"                    v-bind:属性名:"属性值"
    @事件名 v-on:"js代码"           v-on:事件名="js代码"
    vue的指令无非是针对html文档中的属性，标签文本，属性，事件，样式和数据进行操作和页面控制
-->
<div id="box">
    <img :src="image_url" alt="" class="btn">
</div>
<script>
    var vm = Vue.createApp({
        data(){
            return{
                image_url: "./imgs/2.jpg"
            }
        },
        mounted(){
            setInterval(() => {
                if (this.image_url === "./imgs/1.jpg"){
                    this.image_url = "./imgs/2.jpg"
                }else {
                     this.image_url = "./imgs/1.jpg"
                }
            },5000)
        }
    }).mount("#box")
</script>
</body>
</html>